<template>
	<view class="uni-nav-bar sp">
		<navigator class="nav-item" :url="item.url" v-for="(item, index) in tabList" :key="index" open-type="reLaunch"
		 hover-class="none">
			<image v-if="tabIndex==item.id" mode="scaleToFill" :src="item.imgOn"></image>
			<image v-if="tabIndex!=item.id" mode="scaleToFill" :src="item.imgOff"></image>
			<text :style="tabIndex!=item.id?'':'color:#0251f4'">{{item.name}}</text>
		</navigator>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				tabList: [{
						id: 1,
						name: "首页",
						imgOff: "/static/tab-home.png",
						imgOn: "/static/tab-home-current.png",
						"url": "/pages/ex/index/index"
				},
					{
						id: 2,
						name: "发布",
						imgOff: "/static/tab-bid.png",
						imgOn: "/static/tab-bid-current.png",
						"url": "/pages/ex/product/list"
				},
					{
						id: 3,
						name: "个人中心",
						imgOff: "/static/tab-my.png",
						imgOn: "/static/tab-my-current.png",
						"url": "/pages/ex/user/user"
				}
			]
			}
		},
		created() {},
		methods: {
			Type(item) {}
		},
	}
</script>

<style lang="scss">
	.uni-nav-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 998;
		display: flex;
		justify-content: space-between;
		text-align: center;
		background-color: #fff;

		&:before {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			content: '';
			transform: scaleY(0.33);
			transform-origin: 0 0 0;
			border-top: 1upx solid $base-color-disabled;
		}

		.nav-item {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			padding-bottom: 6upx;
			font-size: $base-font-sm;
			color: rgb(192, 196, 204);
			line-height: 36upx;

			&.active {
				color: rgb(2, 81, 244);
			}
		}

		image {
			margin-top: 10upx;
			width: 48upx;
			height: 48upx;
		}
	}
</style>
